<template>
  <div class="cms-novel" :class="`style_${type}`">
    <div class="flex gap-x-3" v-for="(item, index) in 4" :key="index">
      <div class="novel">
        <div class="video_shadow">
          <img :src="homeIcons.film" alt="" class="img-show" />
          <div v-if="type === 1" class="flex flex-row gap-x-1 absolute left-1 bottom-2 dome-text">
            <img :src="homeIcons.hot" alt="" class="w-3" />
            <span class="text-xs text-[#fff]">热度值</span>
          </div>
        </div>
        <div v-if="index % 2 === 0" class="free">
          <div class="free-text">免费</div>
        </div>
        <div v-else class="gold">
          <dollar-outlined class="gold-icon" />
          <span class="gold-text">120</span>
        </div>
      </div>
      <div class="flex flex-col flex-1">
        <div class="title">
          <span> 小说名称 </span>
          <div v-if="type === 2" class="text-[#FF6741] text-xs">
            <img :src="homeIcons.hot" alt="" class="w-3 relative bottom-0.5" />
            热度值
          </div>
        </div>
        <div v-if="type === 1" class="author">作者</div>
        <div class="des">小说简介</div>
        <div v-if="type === 2" class="all-des">标签·类型·状态</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import cmsNovelListProps from './props'
import { DollarOutlined, StarFilled } from '@ant-design/icons-vue'
import homeIcons from '../../assets'

export default defineComponent({
  props: cmsNovelListProps,
  setup() {
    return {
      homeIcons
    }
  },
  components: {
    DollarOutlined,
    StarFilled
  }
})
</script>
<style scoped lang="less">
.cms-novel {
  width: 375px;
  background: #f8f8f8;
  padding: 16px;
  @apply flex flex-col gap-y-4;
  .novel {
    position: relative;
  }
  .img-show {
    object-fit: cover;
  }

  .free {
    width: 36px;
    height: 20px;
    background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
    border-radius: 0 4px 0 4px;
    font-size: 12px;
    color: #ffffff;
    padding: 2px 6px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .gold {
    height: 20px;
    background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
    border-radius: 0 4px 0 4px;
    font-size: 12px;
    line-height: 20px;
    color: #ffffff;
    padding: 0 6px;
    position: absolute;
    right: 0;
    top: 0;
    @apply flex;
    .gold-icon {
      align-self: center;
    }
  }
  .gold-icon {
    margin-right: 2px;
    font-size: 14px;
  }
  .title {
    font-size: 16px;
    color: #000000;
    letter-spacing: 0;
    font-weight: 500;
  }
  .author {
    font-size: 14px;
    color: #8f9299;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 8px;
  }
  .des {
    font-size: 14px;
    color: #8f9299;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 12px;
  }
  .novel {
    width: 79px;
    height: 108px;
    .video_shadow {
      @apply w-full h-full;
      border-radius: 4px;
    }
    .img-show {
      width: 40px;
    }
  }
  &.style_1 {
  }
  &.style_2 {
    .title {
      @apply flex justify-between;
    }
    .all-des {
      font-size: 14px;
      color: #8f9299;
      letter-spacing: 0;
      font-weight: 400;
      margin-top: 8px;
    }
  }
}
</style>
